<template>
    <div class="ApproveQuery">
        <div class="queryForm">
            <el-form :model="targetForm" :inline="true">
                <el-form-item label="审批状态" label-width="100">
                    <el-select v-model="targetForm.targetStatue" placeholder="请输入菜单状态">
                        <el-option label="全部" value="" />
                        <el-option label="待审批" value="1" />
                        <el-option label="审批中" value="2" />
                        <el-option label="审批拒绝" value="3" />
                        <el-option label="审批通过" value="4" />
                        <el-option label="作废" value="5" />
                    </el-select>
                </el-form-item>
                <el-form-item label-width="100">
                    <el-button type="primary" @click="search">查询</el-button>
                    <el-button @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
            <!-- <query-form
                :form="searchLabel"
                v-model="targetForm"
                @searchHandler="search"
                @cancelHandler="reset"
            ></query-form> -->
        </div>
        <div class="baseTable">
            <el-table ref="listRef" :data="approveList" style="width: 100%" row-key="_id">
                <el-table-column
                    v-for="ele in columns"
                    :key="ele.prop"
                    :prop="ele.prop"
                    :label="ele.label"
                    :formatter="ele.formatter"
                    :width="ele.width"
                />
                <el-table-column label="操作" min-width="120">
                    <template #default="scope">
                        <el-button
                            v-show="scope.row.applyState == 1 || scope.row.applyState == 2"
                            @click="approveOperate(scope.row)"
                            v-has="'approve-check'"
                        >
                            审批
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pages">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="totalPage"
                    @current-change="pageChange"
                />
            </div>
        </div>
        <el-dialog v-model="queryDialog" @close="close">
            <el-form :model="queryForm" ref="queryRef" :rules="rules">
                <el-form-item label="休假类型:" prop="applyType" label-width="100">
                    {{ applyTypeSig }}
                </el-form-item>
                <el-form-item label="休假时间:" prop="startToEnd" label-width="100">
                    {{ queryForm.startToEnd }}
                </el-form-item>
                <el-form-item label="休假时长:" prop="leaveTime" label-width="100">
                    {{ queryForm.leaveTime }}
                </el-form-item>
                <el-form-item label="休假原因:" prop="reasons" label-width="100">
                    {{ queryForm.reasons }}
                </el-form-item>
                <el-form-item label="审批状态:" prop="applyState" label-width="100">
                    {{ applyStateSig }}
                </el-form-item>
                <el-form-item label="当前审批人:" prop="curAuditUserName" label-width="100">
                    {{ queryForm.curAuditUserName }}
                </el-form-item>
                <el-form-item label="备注:" prop="remark" label-width="100">
                    <el-input v-model="queryForm.remark" :rows="2" type="textarea" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="submit(queryRef, 'pass')">审核通过</el-button>
                    <el-button type="danger" @click="submit(queryRef, 'refuse')">驳回</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { reactive, ref, toRaw } from 'vue';
import { ElMessage } from 'element-plus';
import api from '../api';
import utils from '../utils';

/*表单相关对象*/
let approveRequestData = {
    type: 'approve',
    applyState: '',
    pageNum: 1,
    pageSize: 10,
};
const columns = reactive([
    {
        label: '单号',
        prop: 'orderNo',
    },
    {
        label: '申请人',
        prop: 'applyUser.userName',
    },
    {
        label: '休假时间',
        prop: 'startToEnd',
        width: 210,
    },
    {
        label: '休假时长',
        prop: 'leaveTime',
    },
    {
        label: '休假类型',
        prop: 'applyType',
        formatter(row, column, value) {
            return {
                1: '事假',
                2: '调休',
                3: '年假',
            }[value];
        },
    },
    {
        label: '休假原因',
        prop: 'reasons',
    },
    {
        label: '申请时间',
        prop: 'createTime',
        formatter: (row, column, value) => {
            return utils.formateDate(new Date(value));
        },
        width: 210,
    },
    {
        label: '审批人',
        prop: 'auditUsers',
    },
    {
        label: '当前审批人',
        prop: 'curAuditUserName',
    },
    {
        label: '审批状态',
        prop: 'applyState',
        formatter(row, column, value) {
            return {
                1: '待审批',
                2: '审批中',
                3: '审批拒绝',
                4: '审批通过',
                5: '作废',
            }[value];
        },
    },
]);
const targetForm = reactive({
    targetStatue: '',
});
const searchLabel = [
    {
        type: 'select',
        label: '审批状态',
        prop: 'targetStatue',
        placeholder: '请选择菜单状态',
        option: [
            {
                value: '',
                label: '全部',
            },
            {
                value: 1,
                label: '待审批',
            },
            {
                value: 2,
                label: '审批中',
            },
            {
                value: 3,
                label: '审批拒绝',
            },
            {
                value: 4,
                label: '审批通过',
            },
            {
                value: 5,
                label: '作废',
            },
        ],
    },
];
const approveList = ref([]);
const queryForm = ref({});
const rules = reactive({
    remark: {
        required: true,
        message: '请输入备注',
        trigger: 'blur',
    },
});
/*普通变量*/
const listRef = ref(null);
const queryDialog = ref(false);
let applyTypeSig = ref('');
let applyStateSig = ref('');
const queryRef = ref(null);
const totalPage = ref(null);
/*请求*/
const getApproveList = async () => {
    let { list, page } = await api.getApproveList(approveRequestData);
    list.forEach(ele => {
        let sT = utils.formateDate(new Date(ele.startTime)).slice(0, 10);
        let eT = utils.formateDate(new Date(ele.endTime)).slice(0, 10);
        ele['startToEnd'] = sT + '到' + eT;
    });
    totalPage.value = page.total;
    approveList.value = list;
};
/*调用*/
getApproveList();
/*按钮*/
const approveOperate = row => {
    switch (row.applyType) {
        case 1:
            applyTypeSig.value = '事假';
            break;
        case 2:
            applyTypeSig.value = '调休';
            break;
        case 3:
            applyTypeSig.value = '年假';
            break;

        default:
            break;
    }
    switch (row.applyState) {
        case 1:
            applyStateSig.value = '待审批';
            break;
        case 2:
            applyStateSig.value = '审批中';
            break;
        case 3:
            applyStateSig.value = '审批拒绝';
            break;
        case 4:
            applyStateSig.value = '审批通过';
            break;
        case 5:
            applyStateSig.value = '作废';
            break;

        default:
            break;
    }
    queryForm.value = row;
    console.log(row);
    queryDialog.value = !queryDialog.value;
};
const submit = (form, action) => {
    form.validate(async vaild => {
        if (vaild) {
            try {
                let data = toRaw(queryForm.value);
                data['action'] = action;
                console.log(data);
                await api.dealApprove(data);
                queryDialog.value = !queryDialog.value;
                form.resetFields();
                getApproveList();
                ElMessage({
                    message: '提交成功',
                    type: 'success',
                });
            } catch (error) {
                console.log(error);
                ElMessage.error('提交失败');
            }
        }
    });
};
const close = () => {
    queryForm.value.remark = '';
};
const search = () => {
    approveRequestData.applyState = targetForm.targetStatue;
    getApproveList();
};
const reset = () => {
    targetForm.targetStatue = '';
    approveRequestData.applyState = targetForm.targetStatue;
    getApproveList();
};
const pageChange = pages => {
    approveRequestData.pageNum = pages;
    getApproveList();
};
</script>

<style lang="scss" scoped>
.queryForm {
    width: 100%;
    height: 65px;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding-top: 20px;
    padding-left: 40px;
}
.pages {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
